<template>
  <div>social -- {{ count }}
    <div>
      <el-button @click="count++">修改count</el-button>
    </div>
    <div>
      <abc :data="data" />
    </div>
    <hr>
    <div>
      <ACom :a="count" b="2" c="hello" @update="updateCount" />
    </div>
  </div>
</template>

<script>
import Tree from './hm-tree.vue'
import ACom from './A.vue'

export default {
  name: 'Social',
  components: {
    Abc: Tree,
    ACom
  },
  // 依赖注入： 父组件 给所有的后代直接传数据，不管多深
  // provide 提供者
  provide() {
    return {
      // 通过provide传递数据，不是响应式的，
      // 父组件数据发生了改变，孙子不会改变，得不到父组件的变化, 解决办法就是不传递数据，直接传递函数
      count11: this.count
      // count11: this.getNewCount
    }
  },
  data() {
    return {
      data: [
        {
          name: '测试1',
          children: [
            {
              name: '测试2'
            },
            {
              name: '测试2'
            },
            {
              name: '测试3',
              children: [
                {
                  name: '测试4'
                }
              ]
            }
          ]
        }
      ],
      count: 10
    }
  },
  methods: {
    getNewCount() {
      return this.count
    },
    updateCount(val) {
      this.count = val
    }
  }
}
</script>
